<template>
	<view class="">
		<view class="media-foot flex-row box">
			<image :src="list.avatar"></image>
				<view class="nickname">
					{{list.nickname}}</br>
					<view v-if="list.state==1" class="media-info flex-row">
						<text class="info-text">
							<text class="status1"></text>
							在线
						</text>
				    </view>
					<view v-if="list.state==2" class="media-info flex-row">
						<text class="info-text">
							<text class="status2"></text>
							接单中
						</text>
					</view>
					<view v-if="list.state==3" class="media-info flex-row">
						<text class="info-text">
							<text class="status3"></text>
							离线
						</text>
					</view>
				</view>
				<view class="ckxq" @click="seedetail">
					查看详情>
				</view>
				
		</view>
	</view>
</template>

<script>
	export default{
		props:["list"],
		methods:{
			seedetail(){
				uni.navigateTo({
					url:'../news/detai?id='+this.list.id
				})
			}
		}
	}
</script>

<style scoped>
	.media-info {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}
	.flex-row {
		flex-direction: row;
	}
	.media-foot {
		margin-top: 12px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		
	}
	image{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		display: inline-block;
		vertical-align: top;
	}
	.box{
		display: block;
		padding: 20rpx 10rpx; 
		margin:28rpx 15rpx;
		background-color: #f6f6f6;
	}
	.nickname{
		display: inline-block;
		font-size: 40rpx;
		margin: 20rpx 30rpx;
		width: 320rpx;
		/* margin-right: 190rpx; */
	}
	.status1,.status2,.status3{
		display: inline-block;
		width: 20rpx;
		height: 20rpx;
		background-color: #00ff00;
		border-radius: 50%;
		margin: 0rpx 10rpx 0 0;
	}
	.status2{
		background-color: yellow;
	}
	.status3{
		background-color: lightgray;
	}
	.info-text{
		font-size: 30rpx;
		margin-top: 20rpx;
	}
	.ckxq{
		display: inline-block;
		color: rgb(47, 133, 252);
	}
</style>